<template>
	<div id="listdetailed">
		<div class="sousuo">
			<span class="iconfont icon-xiangzuojiantou" @click="$router.go(-1)"></span>
			<input type="text" placeholder="搜索商品名称">
			<span class="iconfont icon-sousuo"></span>
		</div>
		<Productlist :list="list"></Productlist>
	</div>
</template>

<script>
	// 商品列表
	import {
		Getlistdetailed
	} from "@/api/assort"
	import Productlist from '@/components/Product_list.vue'
	export default {
		name: "listdetailed",
		components: {
			Productlist
		},
		data() {
			return {
				// 路由传过来的id
				address_id: 0,
				// 商品列表数据
				list: []
			}
		},
		created() {
			// 获取到动态路由匹配的id
			this.Getlist(this.$route.params.id)
			this.address_id = this.$route.params.id;
			console.log(this.address_id)
		},
		methods: {
			Getlist(address_id) {
				Getlistdetailed(address_id).then(res => {
					this.list = res.data.data.list
					console.log("商品列表", this.list)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$width:(100vw / 375);

	#listdetailed {
		width: 100vw;
		min-height: 100vh;
		background-color: #f5f5f5;

		.sousuo {
			width: 100%;
			height: 48 * $width;
			background-color: #e93323;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			padding: 0 20 * $width;

			input {
				width: 300 * $width;
				height: 30 * $width;
				border-radius: 15 * $width;
				background-color: #fff;
				border: none;
				padding-left: 40 * $width;
				color: #999999;
				font-size: 15 * $width;
			}

			.icon-xiangzuojiantou {
				color: #fff;
				font-size: 20 * $width;
				font-weight: 600;
			}

			.icon-sousuo {
				position: absolute;
				top: 50%;
				left: 65 * $width;
				font-size: 16 * $width;
				transform: translateY(-50%);
			}
		}
	}
</style>
